<template>
	<view class="list-c">
		<!-- 左侧列表 -->
		<scroll-view class="list-l" :scroll-y="true">
			<view class="l-item" :class="{active: index === spusIndex}" v-for="(item, index) in foods" :key="index" @click="spusIndex = index">
				<img :src="item.icon" v-if="item.icon.length > 0">
				<span>{{item.name}}</span>
				<text class="count" v-if="item.count > 0">{{item.count}}</text>
			</view>
		</scroll-view>
		<!-- 右侧商品选择 -->
		<scroll-view class="list-r" :scroll-y="true">
			<view class="section">
				<span class="title">{{spus.title}}</span>
			</view>
			<view class="item-list" v-for="(item, index) in spus.list" :key="index">
				<view class="item">
					<view class="item-l">
						<img :src="item.picture">
					</view>
					<view class="item-r">
						<span class="title">{{item.name}}</span>
						<span class="sub-title">{{item.description}}</span>
						<span class="sale-num">{{item.month_saled_content}} {{item.praise_content}}</span>
						<view class="r-t">
							<span class="price">￥{{item.min_price}}</span>
							<view class="sku" v-if="item.attrs.length">
								<span>选规格</span>
								<span class="count" v-if="item.sequence > 0">{{item.sequence}}</span>
							</view>
							<!-- 修改商品购买数量 -->
							<view class="add-item" v-else>
								<!-- 减少 -->
								<view class="add-l" @click.stop="updateCount(item, index, -1)" v-if="item.sequence > 0">
									<i class="icon mt-reduce-o"></i>
									<span>{{item.sequence}}</span>
								</view>
								<!-- 增加 -->
								<view class="add-r" @click.stop="updateCount(item, index, 1)">
									<i class="icon mt-add-o"></i>
								</view>
							</view>
						</view>
						<view class="tags-c">
							<img class="tags" :src="itm.picture_url" v-for="(itm, idx) in item.product_label_picture_list" :key="idx">
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import Pubsub from 'pubsub-js'
	export default {
		name: 'Menu',
		props: ['pageIndex'],
		data() {
			return {
				tagIndex: 0,
				spusIndex: 0
			}
		},
		computed: {
			...mapGetters(['foods', 'spusList']),
			// 商品标签对应的 商品列表对象
			spus: {
				get() {
					if (!this.spusList) return {}
					const res = this.spusList.map(item => {
						return {
							index: this.spusIndex,
							list: item,
							title: this.foods[this.spusIndex].name
						}
					})
					return res[this.spusIndex]
				},
				set() {
					
				}
			},
			// 已选择的商品列表数组
			selectedfoods() {
				// console.log(this.foods);
				let arr = []
				this.foods.forEach(item => {
					arr = [...arr, ...item.spus.filter(spu => spu.sequence)]
				})
				// console.log(arr);
				return arr
			},
			// 商品总价
			totalPrice() {
				return this.selectedfoods.reduce((total, current) => {
					return total += current.min_price * current.sequence
				}, 0)
			}
		},
		methods: {
			// 
			categoryClick(item, index) {
			  this.tagIndex = index;
			  this.getCategoryMenuDataAction({index})
			},
			// 修改商品数量
			updateCount(item, index, val) {
				// console.log(item);
				// console.log(index);
				item.sequence += val
				Pubsub.publish('changeCount', {
					count: val,
					price: this.totalPrice
				})
			}
		},
		
	}
</script>

<style lang="scss" scoped>
.list-c {
	display: flex;
	position: fixed;
	top: 220rpx;
	bottom: 200rpx;
	.list-l {
		display: flex;
		flex-direction: column;
		width: 160rpx;
		background-color: $page-bgcolor;
		.l-item {
			display: flex;
			width: 160rpx;
			align-items: center;
			justify-content: center;
			padding: 20rpx;
			box-sizing: border-box;
			position: relative;
			img {
				width: 30rpx;
				height: 30rpx;
				background-size: cover;
				border-radius: 15rpx;
			}
			span {
				font-size: 24rpx;
				color: $textDarkGray-color;
				margin-left: 10rpx;
			}
			.count {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $mtRed-color;
				width: 30rpx;
				height: 30rpx;
				border-radius: 15rpx;
				right: 0;
				top: 6rpx;
				position: absolute;
				font-size: 20rpx;
				color: white;
			}
		}
		.active {
			background-color: white;
			span {
				color: #000;
				font-weight: bold;
			}
		}
	}
	.list-r {
		display: flex;
		flex-direction: column;
		flex: 1;
		background-color: white;
		.section {
			display: flex;
			height: 70rpx;
			align-items: center;
			margin-left: 20rpx;
			span {
				font-size: 28rpx;
				color: $textBlack-color;
			}
		}
		.item-list {
			display: flex;
			margin: 0 20rpx;
			flex-direction: column;
			.item {
				display: flex;
				margin-bottom: 30rpx;
				.item-l {
					img {
						width: 160rpx;
						height: 160rpx;
						background-size: cover;
					}
				}
				.item-r {
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					justify-content: space-between;
					flex: 1;
					.title {
						font-size: 28rpx;
						color: $textBlack-color;
						font-weight: bold;
						overflow: hidden;
						line-height: 30rpx;
						height: 30rpx;
					}
					.sub-title {
						font-size: 20rpx;
						color: $textDarkGray-color;
						line-height: 30rpx;
						overflow: hidden;
						height: 30rpx;
						margin-top: 10rpx;
					}
					.sale-num {
						font-size: 20rpx;
						color: $textDarkGray-color;
						margin-top: 10rpx;
					}
					.r-t {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.price {
							font-size: 32rpx;
							color: $mtRed-color;
							font-weight: bold;
						}
						.sku {
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: $theme-color;
							padding: 8rpx 12rpx;
							border-radius: 25rpx;
							position: relative;
							span {
								font-size: 20rpx;
								color: $textBlack-color
							}
							.count {
								width: 30rpx;
								height: 30rpx;
								background-color: $mtRed-color;
								display: flex;
								align-items: center;
								justify-content: center;
								position: absolute;
								color: white;
								font-size: 20rpx;
								right: 0;
								top: -14rpx;
								border-radius: 15rpx;
							}
						}
						.add-item {
							display: flex;
							align-items: center;
							.add-l {
								display: flex;
								flex-direction: row;
								align-items: center;
								i {
									font-size: 36rpx;
									color: $textGray-color;
								}
								span {
									font-size: 24rpx;
									color: $textBlack-color;
									margin: 0 20rpx;
								}
							}
							.add-r {
								i {
									color: $theme-color;
									font-size: 40rpx;
								}
							}
						}
					}
					.tags-c {
						display: flex;
						align-items: center;
						margin-top: 10rpx;
						flex-wrap: wrap;
						img {
							width: 60rpx;
							height: 30rpx;
							background-size: cover;
						}
					}
				}
			}
		}
	}
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
}
  	
</style>